<template>
  <div class="avatar">
    <el-dropdown trigger="click">
      <div class="avatar-wrapper">
        <span class="user-info" style="font-size: 14px;">
          {{ userName }}
          <i class="el-icon-caret-bottom" />
        </span>
        <div class="avatar-image">
          <img
            class="user-avatar"
            :src="avatar"
            style="width: 30px; height: 30px;"
          />
        </div>
      </div>
      <el-dropdown-menu slot="dropdown">
        <router-link to="/user/profile">
          <el-dropdown-item>修改密码</el-dropdown-item>
        </router-link>

        <el-dropdown-item divided @click.native="logout">
          <span>退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {}
    },
    computed: {
      ...mapGetters(['avatar', 'device', 'userName', 'avatar']),
    },
    methods: {
      async logout() {
        this.$confirm('确认退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          let _this = this
          this.$store.dispatch('user/logout').then(() => {
            // location.reload()
            _this.$router.replace('/login')
          })
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  // 导入全局的样式变量
  @import '~@/assets/styles/variables.scss';

  .avatar {
    height: 100%;
    font-size: $font-size-default;
    color: $color-default;

    &.hover-effect {
      cursor: pointer;
      transition: all 0.3s;
    }

    .avatar-wrapper {
      display: flex;
      height: 100%;
      align-items: center;

      .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        align-self: center;
      }

      .avatar-image {
        width: 32px;
        height: 32px;
        background-color: #e2e8f0;
        border-radius: 50%;
        text-align: center;
      }

      .user-info {
        align-self: center;
        padding-left: 10px;
        padding-right: 10px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        font-size: 12px;
      }
    }
  }
</style>
